iT邦幫忙

2022 iThome 鐵人賽

DAY 21
0
自我挑戰組

小白網頁設計練成記系列 第 21

小白網頁設計練成記-DAY21-偽元素(pesudo element)

  • 分享至 

  • xImage
  •  

是一個不存在於頁面上的元素。透過CSS內建的元素,以兩個冒號做開頭,主要是用調整頁面上特別部分樣式。

以下列出常用:
::first-line 元素的第一行
::fisrt-letter 元素的第一個字
::selection 滑鼠選取起來的範圍
::before 元素裡面的最前面(可以想像成span)
::after 元素裡面的最後面(可以想像成span)

::first-line

示範:

<style>
            p.para::first-line{
            color:red;
            background-color: #f0c;
            }
</style>
</head>
<body>
    <h1>偽元素(Pesudo Element)</h1>
    <p class="para">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis quidem dolorum atque doloremque </p>
</body>

在上面以::fist-line來改變para內文的第一行。
顯示如下:
https://ithelp.ithome.com.tw/upload/images/20220921/20152034q6EdnvdK1q.jpg

::first-letter

示範:

<style>
p.para::first-letter{
            font-size: 40px;
            border: 1px solid black;
        
</head>
<body>
    <h1>偽元素(Pesudo Element)</h1>
    <p class="para">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis quidem dolorum atque doloremque </p>5

這裡我們使用::first-letter來改變作後第一個字的大小

顯示如下:
https://ithelp.ithome.com.tw/upload/images/20220921/20152034kQ2qq2APJu.jpg

::selection

示範:

<style>
        p.para::selection{
              background-color: yellow;
              color:#0cc
            }
</style>     
</head>
<body>
    <h1>偽元素(Pesudo Element)</h1>
    <p class="para">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis quidem dolorum atque doloremque</p>

經過鼠標選取後的範圍,都會變色。

顯示如下:
https://ithelp.ithome.com.tw/upload/images/20220921/20152034trvdSf3a8i.jpg

::before及::after

示範:

<style>
p.para2::before{
            content: "1234";
        }
        
        p.para2::after{
            content: "1234";
</style> 
    
</head>
<body>
    <h1>偽元素(Pesudo Element)</h1>
     <p class="para2">段落二</p>
</body>

::before及::after 就像html中的span一樣~

顯示如下:
https://ithelp.ithome.com.tw/upload/images/20220921/20152034Y4eeCaxgOl.jpg


上一篇
小白網頁設計練成記-DAY20-選取器class/id
下一篇
小白網頁設計練成記-DAY22-CSS Seudo class
系列文
小白網頁設計練成記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言